<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-white">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 搜索栏 -->
        <div class="px-4 pt-4 pb-2">
            <div class="relative">
                <input type="search" 
                       placeholder="搜索活动、资讯..." 
                       class="w-full bg-gray-100 rounded-full py-2 pl-10 pr-4">
                <i class="fas fa-search absolute left-4 top-3 text-gray-400"></i>
            </div>
        </div>

        <!-- 活动数据展示区 -->
        <section class="pt-4">
            <h2 class="text-lg font-semibold px-4 mb-3">近期热门活动</h2>
            <!-- 轮播图区域 -->
            <div class="relative">
                <div class="overflow-hidden">
                    <div class="flex transition-transform duration-300">
                        <!-- 活动卡片1 -->
                        <div class="w-full flex-shrink-0 px-4">
                            <a href="activity-detail.html" class="block bg-white rounded-xl shadow-sm overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87" alt="活动图片" class="w-full h-48 object-cover">
                                <div class="p-4">
                                    <h3 class="font-semibold">2024科技创新展览会</h3>
                                    <p class="text-gray-500 text-sm mt-1">4月15日 - 4月17日</p>
                                </div>
                            </a>
                        </div>
                        <!-- 活动卡片2 -->
                        <div class="w-full flex-shrink-0 px-4">
                            <a href="activity-detail.html" class="block bg-white rounded-xl shadow-sm overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1523580494863-6f3031224c94" alt="活动图片" class="w-full h-48 object-cover">
                                <div class="p-4">
                                    <h3 class="font-semibold">AI艺术展</h3>
                                    <p class="text-gray-500 text-sm mt-1">4月20日 - 4月25日</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 轮播指示器 -->
                <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
                    <button class="w-2 h-2 rounded-full bg-white opacity-50"></button>
                    <button class="w-2 h-2 rounded-full bg-white"></button>
                </div>
            </div>
        </section>

        <!-- 资讯分类标签 -->
        <div class="px-4 pt-6 pb-2">
            <div class="flex space-x-3 overflow-x-auto">
                <button class="px-4 py-2 bg-blue-500 text-white rounded-full text-sm whitespace-nowrap">全部</button>
                <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">AI</button>
                <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">科技</button>
                <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">创新</button>
                <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">医疗</button>
            </div>
        </div>

        <!-- AI资讯列表 -->
        <section class="px-4 pt-6">
            <h2 class="text-lg font-semibold mb-4">资讯动态</h2>
            <div class="space-y-4">
                <!-- 资讯卡片 -->
                <a href="news-detail.html" class="block bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">AI</span>
                        <span class="px-2 py-0.5 bg-green-50 text-green-600 rounded text-xs">技术</span>
                    </div>
                    <h3 class="font-medium">OpenAI发布最新研究成果</h3>
                    <p class="text-gray-500 text-sm mt-2">人工智能领域最新突破，将为产业带来重大影响...</p>
                    <div class="flex items-center mt-3 text-xs text-gray-500">
                        <span>2024-04-10</span>
                        <span class="mx-2">·</span>
                        <span>阅读 1,234</span>
                    </div>
                </a>
                <!-- 资讯卡片2 -->
                <a href="news-detail.html" class="block bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">AI</span>
                        <span class="px-2 py-0.5 bg-red-50 text-red-600 rounded text-xs">医疗</span>
                    </div>
                    <h3 class="font-medium">AI在医疗领域取得重大突破</h3>
                    <p class="text-gray-500 text-sm mt-2">新型AI诊断系统准确率达到95%，大幅提升诊断效率...</p>
                    <div class="flex items-center mt-3 text-xs text-gray-500">
                        <span>2024-04-09</span>
                        <span class="mx-2">·</span>
                        <span>阅读 2,156</span>
                    </div>
                </a>
                <!-- 资讯卡片3 -->
                <a href="news-detail.html" class="block bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="px-2 py-0.5 bg-purple-50 text-purple-600 rounded text-xs">科技</span>
                        <span class="px-2 py-0.5 bg-orange-50 text-orange-600 rounded text-xs">创新</span>
                    </div>
                    <h3 class="font-medium">量子计算研究获重大进展</h3>
                    <p class="text-gray-500 text-sm mt-2">科研团队成功实现了量子比特的稳定控制，为量子计算发展...</p>
                    <div class="flex items-center mt-3 text-xs text-gray-500">
                        <span>2024-04-08</span>
                        <span class="mx-2">·</span>
                        <span>阅读 1,867</span>
                    </div>
                </a>
            </div>
        </section>
    </div>

    <!-- 底部导航栏 -->
    <nav class="tab-bar">
        <div class="grid grid-cols-3 h-full">
            <a href="home.html" class="flex flex-col items-center justify-center text-blue-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="features.html" class="flex flex-col items-center justify-center text-gray-400">
                <i class="fas fa-th-large text-xl"></i>
                <span class="text-xs mt-1">功能</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center justify-center text-gray-400">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <!-- 添加登录状态检查 -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
            if (!isLoggedIn) {
                window.location.href = 'login.html';
            }
        });
    </script>
</body>
</html> 
